{% extends "base.html" %}
{% block title %}{{people.name}}的照片{% endblock %}

{% block headerlink %}
<link href="/static/css/common.css" rel="stylesheet" type="text/css" media="all" />
<link href="/static/css/base.css" rel="stylesheet" type="text/css" media="all" />
<link href="/static/css/login_reg.css" rel="stylesheet" type="text/css" media="all" />
<link href="/static/css/photo.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="/static/js/jquery.min.js"></script>

<script type="text/javascript"> 
$(document).ready(function()
{
	$("#addComment").click(function(event)
	{
		add_comment();
    });
    
    $("#delete-comment a").live("click", function(event)
	{
		if (confirm("确定删除这条评论吗?") == true)
		{
			author_id = $(this).attr('d-author-id');
			comment_id = $(this).attr('d-comment-id');
			delete_comment(author_id,comment_id);
		}
    });
    
	$("#delete-photo").click(function(event)
	{
		if (confirm("确定删除这张照片?") == true)
		{
			delete_photo();
		}
    });
    
    $("#mark-like").click(function(event)
	{
		mark_like();
    });
    
    $("#cancel-like").click(function(event)
	{
		cancel_like();
    });
    
    function mark_like()
    {
        $.post("mark_like/",
        {},
        function(data)
        {
        	if(data.status=="success")
        	{
        	    $("#mark-like").attr("style","display:none");//修改style
        	    $("#cancel-like").attr("style","display:block");
        	    $("#like-count").html(String(Number($("#like-count").text())+1));
        	}
        	else
        	{
        		alert(data.status);
        	}
        },
        "json"
    );}
    
    function cancel_like()
    {
        $.post("cancel_like/",
        {},
        function(data)
        {
        	if(data.status=="success")
        	{
        	    $("#cancel-like").attr("style","display:none");
        	    $("#mark-like").attr("style","display:block");
        	    $("#like-count").html(String(Number($("#like-count").text())-1));
        	}
        	else
        	{
        		alert(data.status);
        	}
        },
        "json"
    );}
    
    function delete_photo()
    {
        $.post("delete/",
        {},
        function(data)
        {
        	if(data.status=="success")
        	{
        		window.location.href='{{ request.HOME_PAGE_URL }}photos/{{people.id}}/albums/{{album.id}}/';
        	}
        	else
        	{
        		alert(data.status);
        	}
        },
        "json"
    );}
    
    function add_comment()
    {
        $.post("add_comment/",
        {
            content:$("#commentContent").val(),
        },
        function(data)
        {
        	if(data.status=="success")
        	{
        		$("#commentContent").val("")
				$("#comment-list").append(data.html);
        	}
        	else
        	{
        		alert(data.status);
        	}
        },
        "json"
    );}
    
    function delete_comment(author_id,comment_id)
    {
        $.post("{{ request.HOME_PAGE_URL }}photos/delete_comment/",
        {
        	user_id:"{{people.id}}",
        	author_id:author_id,
        	comment_id:comment_id
        },
        function(data)
        {
        	if(data.status=="success")
        	{
        		item = "#c_" + comment_id
        		$(item).remove();
        	}
        	else
        	{
        		alert(data.status);
        	}
        },
        "json"
    );}
});
</script>
{% endblock %}

{% block content %}
<div class="content-area" style="float:left;width:inherit;">

<div style="float:left;width:600px;">

<h1 style="margin:0;">
{{album.topic}}
<span style="font-size:20px;color:#595959;margin-left:15px;">
{{photo.title}}
</span>
</h1>


<div class="opt-bar-line">
	<span class="opt-left">
        第{{album.current_p}}张/共{{album.photo_count}}张
    </span>
	<span class="opt-mid blue-link">
        <a href="prev/" title="上一张" id="pre_photo">上一张</a>&nbsp;/&nbsp;<a href="next/" name="next_photo" title="下一张" id="next_photo">下一张</a>
    </span>
	<span class="fright blue-link">
        <a title="浏览该相册的所有照片" href="{{ request.HOME_PAGE_URL }}photos/{{people.id}}/albums/{{album.id}}/">&gt;浏览所有照片</a>
    </span>
</div>

<div class="photo-show">
	<div>
	<a href="next/" title="点击查看下一张"><img src="{{photo.middle_loc}}"></a>
    </div>
    <div style="color:#555;margin-top:10px;font-size:14px;">
	{{photo.caption}}
	</div>
    
    <div class="photo-opt">
	<span class="blue-link">
        <a title="查看原图" href="{{photo.original_loc}}">&gt;查看原图</a>
    </span>
    <span class="fright">
    	{% if is_myPage %}
    	<span class="blue-link" style="margin-left:10px;">
        <a title="修改照片属性" href="{{ request.HOME_PAGE_URL }}photos/{{people.id}}/{{photo.id}}/edit/">&gt;修改照片属性</a>
    	</span>
    	<span class="delete-link" style="margin-left:10px;">
        <a id="delete-photo" title="删除这张照片?" href="javascript:void(0);">&gt;删除照片</a>
    	</span>
    	{% else %}
    		<span class="fleft" style="margin-right:20px;"><span id="like-count">{{photo.like_count}}</span>人喜欢
    		</span>
    		{% if request.user.is_authenticated %}
    			{% if photo.i_like %}
        		<span class="red-link fright" id="mark-like" style="display:none">
        		<a title="标为喜欢?" href="javascript:void(0);"><span style="font-weight:bold;">+</span>标为喜欢</a>
        		</span>
        		<span class="red-link fright" id="cancel-like">
        		<a title="取消喜欢?" href="javascript:void(0);"><span style="font-weight:bold;">--</span>取消喜欢</a>
        		</span>
    			{% else %}
    			<span class="red-link fright" id="mark-like">
        		<a title="标为喜欢?" href="javascript:void(0);"><span style="font-weight:bold;">+</span>标为喜欢</a>
        		</span>
        		<span class="red-link fright" id="cancel-like" style="display:none">
        		<a title="取消喜欢?" href="javascript:void(0);"><span style="font-weight:bold;">--</span>取消喜欢</a>
        		</span>
        		{% endif %}
        	{% endif %}
        {% endif %}
    </span>
    </div>
</div>

<div class="comment" id="comment-area">

<div id="comment-list">
{% for comment in comment_list %}
<div class="comment-item" id="c_{{comment.id}}">
	<div class="fleft">
	<a href="{{ request.HOME_PAGE_URL }}people/{{comment.author.id}}/">
	<img title="{{comment.author.name}}" src="{{comment.author.avatar_square_loc}}">
	</a>
	</div>

	<div class="comment-text-wrapper">
		<div class="comment-head">
		<span>{{comment.date_posted}}</span>
		<span class="blue-link" style="margin-left:10px;"><a title="{{comment.author.name}}" href="{{ request.HOME_PAGE_URL }}people/{{comment.author.id}}/">{{comment.author.name}}</a></span>
		{% if is_myPage or request.user == comment.author %}
		<span class="fright delete-link" id="delete-comment">
        <a d-author-id="{{comment.author.id}}" d-comment-id="{{comment.id}}" title="删除这条评论?" href="javascript:void(0);">&gt;删除</a>
    	</span>
    	{% endif %}
		</div>
		<div class="comment-text">
		<span>{{comment.content}}</span>
		</div>
	</div>
</div>
{% endfor %}
</div>

{% if request.user.is_authenticated %}
<div style="clear:both;float:left;margin-top:50px;">
	<span class="introduction-text">你的回应 · · · · · · </span>
	
		<span style="float:left;margin-top:10px;">
		<textarea name="content" rows="7" class="basic-input" id="commentContent" style="width:550px;height:auto" placeholder="在这里添加你的回应..." value=""></textarea>
		</span>
		<span style="clear:both;float:left;margin-top:10px;">
		<input type="submit" name="addComment" value="加上去" id="addComment" class="btn-white-submit" style="font-size:12px;font-weight:bold;" title="加上去">
		</span>
	
</div>
{% endif %}
</div>

</div>

<div class="photo-info-slide">
    <div class="fleft">
    	<div class="fleft">
    	<a href="{{ request.HOME_PAGE_URL }}people/{{people.id}}/">
    	<img src="{{people.avatar_square_loc}}">
    	</a>
    	</div>
    	<div class="photo-upload-date">
    	<span class="fleft blue-link">来自<a href="{{ request.HOME_PAGE_URL }}people/{{people.id}}/" title="">{{photo.owner.name}}</a></span> 
    	<span style="clear:both;float:left;margin-top:5px;">
    	上传于{{photo.date_posted|date:"M j, Y"}}
    	</span>
    	</div>
    </div>
	
	<div class="photo-info-div">
	<span class="introduction-text">照片信息 · · · · · · </span>
	<span class="photo-info-case">
    分辨率：{{photo.original_width}}×{{photo.original_height}}
    </span>
	</div>
	
	<div class="photo-info-div">
	<span class="introduction-text">标签 · · · · · · </span>
	<div class="tags font12">
	{% for tag in photo.tags.all %} 
	<span class="tag tag-link"><a href="{{ request.HOME_PAGE_URL }}search/?q={{tag.name}}">{{tag.name}}</a></span>
	{% endfor %}
	</div>
	</div>
	
</div>

</div>
{% endblock %}